<template>
  <div style="width: 1000px;margin: 0 auto">
    <div style="width: 700px;margin: 0 auto">
      <a-form
          ref="formRef"
          name="custom-validation"
          :model="formState"
          :rules="rules"
          v-bind="layout">
        <a-form-item has-feedback label="快递说明:" name="suggest">
          <a-input v-model:value="formState.suggest" maxlength="16" autocomplete="off"/>
        </a-form-item>
        <a-form-item has-feedback label="请选择快递类型:" name="type">
          <a-input-group compact>
            <a-select v-model:value="formState.type" style="width: 100%">
              <a-select-option value="邮政快递">邮政快递</a-select-option>
              <a-select-option value="圆通快递">圆通快递</a-select-option>
              <a-select-option value="韵达快递">韵达快递</a-select-option>
              <a-select-option value="顺丰快递">顺丰快递</a-select-option>
            </a-select>
          </a-input-group>
        </a-form-item>
        <a-form-item has-feedback label="请选择寝室:" name="building">
          <a-input-group compact>
            <a-select v-model:value="formState.building" style="width: 100%">
              <a-select-option value="10栋">10栋</a-select-option>
              <a-select-option value="13栋">13栋</a-select-option>
              <a-select-option value="21栋">21栋</a-select-option>
              <a-select-option value="23栋">23栋</a-select-option>
            </a-select>
          </a-input-group>
        </a-form-item>
        <a-form-item has-feedback label="请输入价格:" name="price">
          <a-input v-model:value="formState.price" autocomplete="off"/>
        </a-form-item>
        <a-form-item has-feedback label="请选择截止时间:" name="endTime">
          <a-date-picker v-model:value="formState.selectTime" show-time placeholder="Select Time" @change="onChange" @ok="onOk" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="submitTask">Submit</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import {ref} from "@vue/reactivity";
import {reactive} from "vue";
import {message} from "ant-design-vue";
import $httpPost from "@/api/myAxios/PostApi";

export default {
  name: "sendTask",
  setup() {
    const formRef = ref();
    const formState = reactive({
      suggest: "",
      type: "",
      building: "",
      price: "",
      endTime:"",
      selectTime:""
    });
    let checkSuggest = async (_rule, value) => {
      if (!value) {
        return Promise.reject('请输入快递说明');
      }
      return Promise.resolve();
    };
    let checkType = async (_rule, value) => {
      if (value === '') {
        return Promise.reject('请选择快递类型');
      } else {
        return Promise.resolve();
      }
    };
    let checkBuilding = async (_rule, value) => {
      if (value === '') {
        return Promise.reject('请选择寝室');
      } else {
        return Promise.resolve();
      }
    };
    let checkPrice = async (_rule, value) => {
      if (value === '') {
        return Promise.reject('请输入价格:');

      } else if (!Number.isInteger(value)){
        return Promise.reject("价格只能是数字")
      }else if (value < 0 || value > 10) {
        return Promise.reject("请输入合理的价格(1-10之间)");
      } else {
        return Promise.resolve();
      }
    };
    const submitTask = async () => {
      try {
        console.log(formState.endTime)
        await formRef.value.validateFields();
        $httpPost("xy/delivery/sendTask",formState).then(res=>{
          if (res.data.code==0){
            message.success("发单成功")
          }else {
            message.warn(res.data.msg)
          }
        })
      } catch (errorInfo) {
        message.warn("请填写正确的表单内容!")
      }
    }
    const onChange = (value, dateString) => {
      formState.endTime=dateString
    };
    const onOk = value => {
    };
    const rules = {
      suggest: [{
        required: true,
        validator: checkSuggest,
        trigger: 'blur',
      }],
      type: [{
        required: true,
        validator: checkType,
        trigger: 'blur',
      }],
      building: [{
        required: true,
        validator: checkBuilding,
        trigger: 'blur',
      }],
      price: [{
        required: true,
        validator: checkPrice,
        trigger: 'blur',
      }],
    };
    const layout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
    };


    const resetForm = () => {
      formRef.value.resetFields();
    };

    return {
      onChange,
      onOk,
      formState,
      formRef,
      rules,
      layout,
      resetForm,
      submitTask
    };
  },
}
</script>

<style scoped>

</style>